<template>
  <NuxtLayout>
    <div class="app-page-error">
      <el-result title="页面好像走开了">
        <template #icon>
          <div class="app-error-icon">
            <Icon name="tabler:error-404" />
          </div>
          <p v-if="isDev">
            error.statusCode: {{ error.statusCode }} <br />
            error.message: {{ error.message }}
          </p>
        </template>
        <template #extra>
          <NuxtLink href="/">
            <el-button type="primary">点击返回</el-button>
          </NuxtLink>
        </template>
      </el-result>
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
const error: any = useError()
</script>
<style lang="scss" scoped>
.app-page-error {
  min-height: calc(100vh - 260px);
}
.app-error-icon {
  --el-result-icon-font-size: 200px;
  --el-result-icon-font-size: 200px;
  .icon {
    font-size: 150px;
    color: var(--el-color-primary);
  }
}
</style>
